<template>
  <div class="block_main blue-tit">
    <!-- <div class="nytit">首页&gt;通知/督办</div> -->
    <el-row style="padding-top: 10px">
      <el-col :span="24" style="padding:0 5px">
        <el-card>
          <div class="title">
            <em>{{menutitle}}</em>
          </div>
          <el-col :span="24" style="text-align:right;padding:0 10px 10px 0;">
     
          </el-col>
          <!-- 筛选 -->
          <el-form style="padding:20px 20px 0" :inline="true" :model="filter" class="demo-form-inline" size="small">
            
            <el-form-item label="搜索名称">
              <el-input v-model="filter.name"></el-input>
              
              <!-- <el-button type="success" @click="AddQuestion">新建诉求</el-button> -->
            </el-form-item>
            <el-button @click="filterFn" type="primary" size="small">查询</el-button>
            <el-button @click="addMenu" type="success" size="small">新增分类</el-button>
            <!-- <span style="float:right;line-height:40px;">累计{{pagetotal}}项</span> -->
          </el-form>
          <!-- 筛选结束 -->
          <el-table border :data="tableData" style="width: 100%" v-loading="loading">
            <el-table-column type="index" width="70" label="序号" fixed></el-table-column>
            <el-table-column
              prop="name"
              label="菜单名称"
              :show-overflow-tooltip="true"
      
            ></el-table-column>
            <el-table-column
              prop="pic_num"
              label="图片编码"
            >
            <template slot-scope="scope">
              <span>{{scope.row.pic_num}}</span>
              <i class="iconfont" v-html="scope.row.pic_num"></i>
            </template>
            </el-table-column>
            <el-table-column label="操作" width="150">
              <template slot-scope="scope">
                <el-button @click="edit(scope.row,scope.$index)" type="text" size="mini">编辑</el-button>
                <el-button @click="delMenu(scope.row,scope.$index)" type="text" size="mini">删除</el-button>
                <el-button @click="seeDetail(scope.row,scope.$index)" type="text" size="mini">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 翻页 -->
          <div class="zpage">
            <el-pagination
                background
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage"
                :page-size.sync="pagesize"
                layout="total, prev, pager, next, jumper"
                :total.sync="pagetotal">
            </el-pagination>
          </div>
          <!-- 翻页 end -->
        </el-card>
      </el-col>
    </el-row>

    <!-- 新增分类名称 -->
    <el-dialog :title="layerTitle" :visible.sync="dialogVisibleSupervise" width="30%">
      <el-form ref="form" style="margin:20px;" :model="layerForm" label-width="100px" size="small">
        <el-form-item label="菜单名称" style="width:100%;">
          <el-input type="text" v-model="layerForm.name" rows="5" placeholder="请输入菜单名称"></el-input>
        </el-form-item>
        <el-form-item label="分类图片代码" style="width:100%;">
          <el-input type="text" v-model="layerForm.pic_num" rows="5" placeholder="请输入菜单名称"></el-input>
        </el-form-item>
      </el-form>
      
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeLayer" size="mini">取 消</el-button>
        <el-button type="primary" @click="Submit" size="mini">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 删除 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      >
      <span>确定删除吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogSrue">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import actionurl from "@/assets/js/actionurl";
import config from "@/config.js";

export default {
  components: {},
  data() {
    return {
      filter:{},
      layerTitle:'新增',
      dialogVisibleSupervise:false,
      dialogVisible:false,
      loading:false,
      Sid:'',
      menutitle:'企业办事',
      layerForm:{},
      tableData:[],
      currentPage:1,
      pagesize:10,
      pagetotal:10000
    };
  },
  components: {},
  
  methods: {
    handleCurrentChange(val) {
      this.currentPage == val;
      this.getList();
    },
    filterFn(){
      this.getList();
    },
    getList(){//获取列表信息
      var _this = this;
      actionurl.getGroupList({
        type:1,//办事企业
        pageOn:_this.currentPage,
        pageNum:10,
        name:_this.filter.name
      }, function(re) {
     
        _this.tableData = re.data;
        _this.pagetotal = re.count;
      });
    },
    getUserinfo() {
      //获取用户信息
      var _this = this;
      actionurl.getUserInfo({}, function(re) {
        // _this.MessageList();
      });
    },
    edit(row){//编辑弹窗并获取信息
      this.Sid = row.id;
      this.layerTitle = '编辑';
      var _this = this;
      actionurl.getEditInfo({
        id:row.id//办事企业
      }, function(re) {
        // console.log(re);
        _this.dialogVisibleSupervise = true;
        _this.layerForm.name = re.data.name;
        _this.layerForm.pic_num = re.data.pic_num;
        // _this.tableData = re.data;
      });
      // this.$router.push({path: '/serviceEdit/2'});
    },
    seeDetail(row){
      this.$router.push({path: '/secondList/'+row.id+'/'+row.name});
    },
    delMenu(row){
      this.dialogVisible = true;
      this.Sid = row.id;
    },
    dialogSrue(){//弹窗确定事件 
      this.delMenuUrlFn();
    },
    delMenuUrlFn(){//删除事件
      var _this = this;
      actionurl.Wgroupdel({
        id:_this.Sid
      }, function(re) {
        _this.loading=false;
        _this.dialogVisible = false;
        _this.$message(re.msg);
        if(re.status == 1){
          _this.getList();
        }
      });
    },
    Submit(){//弹窗确定按钮
      this.loading=true;
      if(this.layerTitle =='新增'){
        this.addUrlFn();
      }else if(this.layerTitle =='编辑'){
        this.editUrlFn();
      }
    },
    addMenu(){//添加菜单弹窗事件
      this.dialogVisibleSupervise = true;
      this.layerForm.name = '';
      this.layerForm.pic_num = '';
    },
    addUrlFn(){//添加方法
      var _this = this;
      actionurl.addGroup({
        type:1,//办事企业
        name:_this.layerForm.name,
        pic_num:_this.layerForm.pic_num
      }, function(re) {
        _this.loading=false;
        _this.dialogVisibleSupervise = false;
        _this.$message(re.msg);
        if(re.status == 1){
          _this.getList();
        }
      });
    },
    editUrlFn(){//编辑事件
      var _this = this;
      actionurl.WdoGroupEdit({
        type:1,//办事企业
        id:_this.Sid,
        name:_this.layerForm.name,
        pic_num:_this.layerForm.pic_num
      }, function(re) {
        _this.loading=false;
        _this.dialogVisibleSupervise = false;
        _this.$message(re.msg);
        if(re.status == 1){
          _this.getList();
        }
      });
    },
    //关闭弹窗事件
    closeLayer(){
      this.dialogVisibleSupervise = false;

      this.layerForm.name = '';
      this.layerForm.pic_num = '';
    }
  },
  created() {
    this.getList();
    // console.log(this.$route.params.type);
  }
};
</script>

<style lang="scss" scoped>
.iconfont{
  color: #444;
  margin-left: 10px;
}
</style>
